<template>
	<view class="chooseNoteStyle">
		<view class="Note">

			<view class="addAndName">

				<view @click="enterNormalEdit" class="addNote">
					<!-- <image class="addImage" src="../../static/add.png" mode="aspectFit"></image> -->
					+
				</view>
				<view class="noteName">DAILY</view>

			</view>
			<image class="classImage" src="../../static/normalNote1.png"></image>
		</view>

		<view class="Note">
			<view class="addAndName">

				<view @click="enter5W1HEdit" class="addNote">
					<!-- <image class="addImage" src="../../static/add.png" mode="aspectFit"></image> -->
					+
				</view>
				<view class="noteName">5W1H</view>
			</view>

			<image class="classImage" src="../../static/5w1h1.png"></image>
		</view>


		<view class="Note">
			<view class="addAndName">

				<view @click="enterSWTOEdit" class="addNote">
					<!-- <image class="addImage" src="../../static/add.png" mode="aspectFit"></image> -->
					+
				</view>
				<view class="noteName">SWTO</view>

			</view>

			<image class="classImage" src="../../static/swto1.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			enterNormalEdit() {
				uni.navigateTo({
					url: "../../pages/noteEdit/noteEdit?flag=" + "1"
				})
			},
			enter5W1HEdit() {
				uni.navigateTo({
					url: "../../pages/note5W1H/note5W1H?flag=" + '1'
				})
			},
			enterSWTOEdit() {
				uni.navigateTo({
					url: "../../pages/noteSWTO/noteSWTO?flag=" + '1'
				})
			}
		}
	}
</script>

<style>
	@keyframes mymovecolor {
		50% {
			background-color: #695af2f5;
		}

		50% {
			border: 8px solid #bdc2e8;
		}
	}






	.chooseNoteStyle {
		background-image: linear-gradient(0deg, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.Note {
		border-style: solid;
		border-radius: 17.44rpx;
		margin: 30rpx;
		height: 480rpx;
		width: 690rpx;
		border: solid 10.47rpx #abb9fff5;
	}

	.addAndName {
		height: 100rpx;
		display: flex;

	}

	.addNote {
		height: 100rpx;
		width: 100rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;

		background-color: #abb9fff5;
		color: #ffffff;
		border-radius: 50%;
		text-align: center;
		font-size: 3ch;
		line-height: 28px;
		cursor: pointer;
		-webkit-animation:  mymovecolor 3s linear 1s infinite normal;
		animation: mymovecolor 3s linear 1s infinite normal;
		border: 8px solid #ffffff;


		.addImage {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.noteName {
		padding: 20rpx 0;
		width: 500rpx;
		height: 60rpx;
		font-size: 50rpx;
		text-align: center;
		color: #695af2f5;
		/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
		font-family: fantasy;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.classImage {
		height: 340rpx;
		width: 340rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		margin-bottom: 10rpx;

	}
</style>